<template>
	<view :style="{ 'background':'#F6F6F8 url('+obj.image+') no-repeat','background-size': '100%'}" class="home-wrap u-m-b-20">
		<base-nav-bar :backIconColor="'#F6F6F8'" :background="{'background':'url('+obj.image+') no-repeat','background-size': '100%'}" :isBack="true">
		
		<text
				slot="content"
				style="color: #333; width: 100%; text-align: center;padding-left: 20rpx;"
			>
			
			</text>
		</base-nav-bar>
		<view class="banner">
		
		</view>
		<view class="activeContent activeContents u-flex u-flex-items-start u-flex-between">
			<view class="title u-flex-2">
				<image :src="obj.image" class="avatar-log"></image>
			</view>
			<view class="u-flex-20 u-flex u-flex-column u-m-l-20" style="width: 85%;">
				<view class="acitveTime u-m-t-10">
					{{ obj.description }}
				</view>
				<view class="acitveTime u-m-t-20 u-flex u-flex-between u-flex-items-center">
					<view class="green">课时:{{ obj.sales? obj.sales + '人购买' : '暂无购买' }}</view>
					<view class="red">￥{{ obj.price }}</view>
				</view>
			</view>
		</view>
		<view class="activeContent goodDesc">
			<view class="acitveHite">
				{{ obj.content }}
			</view>
		</view>
	</view>
</template>

<script>
import { HTTP_IMG_URL } from "../../config/app.js";
import { mapGetters } from "vuex";
import BaseNavBar from "@/components/BaseNavBar.vue";
export default {
	components: {BaseNavBar},
	data() {
		return {
			customBar: 99,
			obj: {},
		};
	},
	computed: mapGetters(["isLogin", "uid", "userInfo"]),
	onLoad(params) {
		this.getDetail(params.id);
	},
	methods: {
		HTTP_IMG_URL() {
			return HTTP_IMG_URL;
		},
		getDetail(id) {
			let that = this;
			that.$Api.merchant.merchantTeacherEdit({
				id: id,
			})
				.then((res) => {
					this.obj = res.data;
					console.log(res.data, 23);
				});
		},
	},
};
</script>

<style lang="scss">
.home-wrap {
	height: 100%;
	min-height: 100vh;
	font-family: PingFang SC;
	background: #f5f5f4;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	.head {
		background: #fff;
	}
	.banner {
		width: 100%;
		height:420rpx;
	}
	.activeContents{
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}
	.activeContent {
		width: 100%;
		background: #fff;
		padding: 26rpx 38rpx;
		box-sizing: border-box;
		text-align: justify;
		.title {
			display: flex;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			align-items: center;
			.avatar-log{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		.acitveTime {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #333;
			display: flex;
			width: 100%;
			.green {
				font-size: 24rpx;
				color: #999;
				line-height: 18px;
				padding: 6rpx 14rpx;
			}
			.red {
				font-size: 24rpx;
				color: #FD463E;
			}
		}
		.acitveHite {
			font-size: 28rpx;
			color: #999ca7;
			line-height: 48rpx;
			margin-top: 18rpx;
		}
		.acitveMsg {
			display: flex;
			justify-content: space-between;
		}
		.acitveMsg:nth-child(2) {
			margin-left: 120rpx;
		}
	}
	.goodDesc{
		min-height: 50vh;
	}
}
</style>
